<template>
    <div class="container benefit">
        <div class="tabCommonTitle">
            <span>成果经济效益</span>
        </div>
        <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
        >
            <a-form-model-item ref="totalProject" label="项目投资额（万元）" prop="totalProject" :label-col="{ span: 10 }" :wrapper-col="{ span: 6 }">
                <a-input v-model="form.totalProject" type="number" @blur="() => {$refs.totalProject.onFieldBlur();}"/>
            </a-form-model-item>
            <a-form-model-item ref="payBack" label="回收期（年）" prop="payBack" :label-col="{ span: 10 }" :wrapper-col="{ span: 6 }">
                <a-input v-model="form.payBack" type="number" @blur="() => {$refs.payBack.onFieldBlur();}"/>
            </a-form-model-item>

            <!-- <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
                <a-button type="primary" @click="onSubmit">保存</a-button>
            </a-form-model-item> -->
        </a-form-model>

        <div class="tableList">
            <div class="addBTn">
                <!-- <p class="list_title">其他材料信息</p> -->
                <a-button type="primary" @click="add_jjxy" :class="is_modify=='Y'?'':'disabled'" :disabled="is_modify=='Y'?false:true">+添加</a-button>
            </div>
            <table style="text-align:center;" width="1110"  align="center" cellpadding="">
                <thead>
                    <tr>
                        <th>年份</th>
                        <th>新增销售额（万元）</th>
                        <th>新增利润（万元）</th>
                        <th>新增税收（万元）</th>
                        <th v-if="is_modify=='Y'?true:false">操作</th>
                    </tr>
                </thead>
                <tbody v-if="jjxylist.length">
                    <tr v-for="(item, index) in jjxylist" :key="index">
                        <td>{{item.jjxyzbNfCopy}}</td>
                        <td>{{item.jjxyzbXzxse}}</td>
                        <td>{{item.jjxyzbXzlr}}</td>
                        <td>{{item.jjxyzbXzss}}</td>
                        <td v-if="is_modify=='Y'?true:false">
                            <a>
                                <img style="width:18px;height:18px;margin-right:11px;" @click="edit_jjxy(item)" src="@/assets/img/bianji.png" alt="">
                                <img style="width:18px;height:18px;margin-left:11px;" @click="del_jjxy(item.id)" src="@/assets/img/shanchu1.png" alt="">
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
      <a-form-model-item ref="explain" label="经济效益的有关说明及各栏目的计算依据（限制400字）：" prop="payBack" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
        <a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" :maxLength="400" v-model="form.explain" @blur="() => {$refs.explain.onFieldBlur();}"/>
      </a-form-model-item>
        <!-- <div class="submit_btn pointer" @click="onSubmit">保存</div> -->
        <a-button class="save_btn pointer" :class="is_modify=='Y'?'':'disabled'" type="primary" @click="onSubmit" :disabled="is_modify=='Y'?false:true">保存</a-button>
        <a-modal
            v-drag-modal
			title="其他材料信息"
            class="enclosure_modal"
			:visible="visible"
            :width="500"
            :maskClosable="false"
            @cancel="handleCancel"
		>
            <template slot="footer">
                <a-button key="submit" type="primary" @click="handleSubmit" :disabled="is_modify=='Y'?false:true">保存</a-button>
            </template>
			<a-form-model ref="ruleForm_add" :model="form_add" :rules="rules_add" >
				<a-form-model-item ref="add_xse" prop="add_xse" label="新增销售额：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.add_xse" placeholder="新增销售额" type="number" @blur="() => {$refs.add_xse.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="add_lr" prop="add_lr" label="新增利润：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.add_lr" placeholder="新增利润" type="number" @blur="() => {$refs.add_lr.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="add_ss" prop="add_ss" label="新增税收：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_add.add_ss" placeholder="新增税收" type="number" @blur="() => {$refs.add_ss.onFieldBlur();}"/>
				</a-form-model-item>
                <a-form-model-item ref="add_nf" prop="add_nf" label="年份：" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
                    <a-date-picker
                        :open='yearShowOne'
                        @openChange="openChangeOne"
                        @panelChange="panelChangeOne"
                        mode="year"
                        format="YYYY"
                        bordered
                        type="date"
                        v-model="form_add.add_nf"
                        suffix-icon=" "
                        @change="onchangetime"
                        placeholder="年份"
                    />
				</a-form-model-item>
			</a-form-model>
		</a-modal>
    </div>
</template>

<script>
import {
    cjxsb_add,
    cxjsb_queryById_jjxy,
    cxjsb_list_jjxy,
    cxjsb_add_jjxy,
    cxjsb_del_jjxy,
} from '@/api/shenbao';
import moment from 'moment';
    export default {
        name: 'benefit',
        props: ['is_modify'],
        data() {
            return {
                yearShowOne:false,
                cxj_cxj_id: '',
                other: '',
                xmobj: {},
                form: {
                    // 项目投资额
                    totalProject: '',
                    // 回收期
                    payBack: '',
                    explain:''
                },
                rules: {
                    totalProject: [{ required: true, message: '请填写项目投资额', trigger: 'blur' }],
                    payBack: [{ required: true, message: '请填写回收期', trigger: 'blur' }],
                    explain: [{ required: true, message: '经济效益的有关说明及各栏目的计算依据', trigger: 'blur' }],
                },
                visible: false,
                form_add: {
                    add_xse: '',
                    add_lr: '',
                    add_ss:'',
                    add_nf: '',
                },
                rules_add: {
                    add_xse: [{ required: true, message: '请填写销售额', trigger: 'blur' }],
                    add_lr: [{ required: true, message: '请填写利润', trigger: 'blur' }],
                    add_ss: [{ required: true, message: '请填写税收', trigger: 'blur' }],
                    add_nf: [{required: true, message: '请选择时间',trigger: 'change'}],
                },
                jjxylist: [],
                edit_id: '',
            }
        },
        props: ['is_modify'],
        methods: {
            moment,
            openChangeOne(status){
                //status是打开或关闭的状态
                if(status){
                    this.yearShowOne =  true
                }
            },
            // 得到年份选择器的值
            panelChangeOne(value){
                this.form_add.add_nf = value
                this.yearShowOne = false
            },
            add_jjxy() {
                this.visible = true;
                this.edit_id = '';
            },
            edit_jjxy(item) {
                this.visible = true;
                this.edit_id = item.id;
                this.form_add.add_lr = item.jjxyzbXzlr;
                this.form_add.add_ss = item.jjxyzbXzss;
                this.form_add.add_xse = item.jjxyzbXzxse;
                this.form_add.add_nf = item.jjxyzbNf;
                // console.log('this.form_add.add_nf===',this.form_add.add_nf)
            },
            del_jjxy(id) {
                let that = this;
                this.$confirm({
                    content: '确定要删除该项吗？',
                    onOk() {
                        cxjsb_del_jjxy({
                            cxj_cxj_id: that.cxj_cxj_id,
                            id: id
                        }).then(res=>{
                            let data = res.data;
                            if (data.success) {
                                that.$message.success('删除成功');
                                that.get_cxjsb_list_jjxy();
                            } else {
                                that.$message.error(data.message);
                            }
                        })
                    },
                    cancelText: '取消',
                    onCancel() {
                        that.destroyAll();
                    },
                });
            },
            handleCancel() {
                this.yearShowOne = false;
                this.visible = false;
                this.resetForm();
            },
            resetForm() {
                this.$nextTick(()=>{
                    this.$refs.ruleForm_add.resetFields();
                })
            },
            onchangetime(date, dateString) {
                // this.form_add.add_nf = dateString;
            },
            handleSubmit() {
                let that = this;
                this.$refs.ruleForm_add.validate(valid => {
                    if (valid) {
                        let data = {};
                        data.jjxyzbXzlr = that.form_add.add_lr;
                        data.jjxyzbXzss = that.form_add.add_ss;
                        data.jjxyzbXzxse = that.form_add.add_xse;
                        data.jjxyzbNf = that.form_add.add_nf;
                        if (that.edit_id) {
                            data.id = that.edit_id;
                        }
                        cxjsb_add_jjxy(data,that.cxj_cxj_id).then(res=>{
                            if (res.data.code=='200') {
                                that.handleCancel();
                                that.get_cxjsb_list_jjxy();
                                that.$message.success('保存成功');
                            } else {
                                that.$message.error(res.data.message);
                            }
                        })
                    } else {
                        return false;
                    }
                });
			},
            onSubmit() {
                let that = this;
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        let data = {};
                        data.jjxyZtz = that.form.totalProject;
                        data.jjxyHsq = that.form.payBack;
                        data.jjxyJsyj = that.form.explain;
                        if (that.xmobj.id) {
                            data.id = that.xmobj.id;
                        }
                        cjxsb_add(data,that.cxj_cxj_id).then(res=>{
                            if (res.data.code=='200') {
                                that.get_cxjsb_queryById_jjxy();
                                that.$message.success('保存成功');
                            } else {
                                that.$message.error(res.data.message);
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            destroyAll() {
                this.$destroyAll();
            },
            get_cxjsb_queryById_jjxy() {
                let that = this;
                cxjsb_queryById_jjxy({cxj_cxj_id:that.cxj_cxj_id}).then(res=>{
                    if (res.data.code=='200') {
                        that.xmobj = res.data.result;
                        that.form.totalProject = res.data.result.jjxyZtz;
                        that.form.payBack = res.data.result.jjxyHsq;
                        that.form.explain = res.data.result.jjxyJsyj;
                    }
                })
            },
            get_cxjsb_list_jjxy() {
                let that = this;
                cxjsb_list_jjxy({cxj_cxj_id:that.cxj_cxj_id}).then(res=>{
                    if (res.data.code=='200') {
                        that.jjxylist = res.data.result;
                        that.jjxylist.forEach(item=>{
                            // item.jjxyzbNf = new Date(item.jjxyzbNf).getFullYear();
                            item.jjxyzbNfCopy = new Date(item.jjxyzbNf).getFullYear();
                        })
                    }
                })
            },// 格式化时间
            dateFormat(date) {
                // 使用 dayjs 处理时间
                return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
            },
            init() {
                this.get_cxjsb_queryById_jjxy();
                this.get_cxjsb_list_jjxy();
            }
        },
        mounted() {
            this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
            this.init();
        }
    }
</script>

<style lang="less" scoped>
.benefit .ant-form {
    max-width: none;
    margin-top: 24px;
}
.addBTn {
    border-top: 1px solid #eee;
    padding-top: 20px;
    display: flex;
    justify-content: flex-end;
    button {
        width: 88px;
        height: 32px;
        background: #3388EE;
        font-size: 16px;
        font-family: PingFangSCRegular;
        color: #FFFFFF;
        line-height: 22px;
        margin-left: 20px;
    }
}
.tableList {
    margin-top: 27px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 54px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: bold;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                height: 52px;
                border-bottom: 1px solid #E8E8E8;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    height: 52px;
                    em {
                        color: #CB0C0C;
                        margin-right: 5px;
                    }
                }
                &:nth-child(even){
                    background: #F5F5F5;
                }
            }
        }
    }
}
.save_btn {
    width: 250px;
    height: 60px;
    border-radius: 4px;
    text-align: center;
    line-height: 60px;
    font-size: 22px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    display: block;
    margin: 40px auto 0;
}
.save_btn1 {
    color: #999;
}
</style>
